<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-18 11:33:14
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
import { Pie } from '@antv/g2plot';
import { ref, onMounted, onUnmounted } from "vue";

export default {
  // 组件名称
  name: "demo",
  // 组件状态值
  setup() {
    const root = ref(null);
    let plot = null;

    let data_pie = ref([]);
    const loadData = async () => {
      data_pie.value = [
       { sex: '男', sold: 0.45 },
       { sex: '女', sold: 0.55 },
      ];
    };

    const initChart = () => {
      plot = new Pie(root.value, {
        data: data_pie.value,
        appendPadding: 10,
        angleField: 'sold',
        colorField: 'sex',
        radius: 0.8,
        legend: false,
        label: {
          type: 'inner',
          offset: '-50%',
          style: {
            fill: '#fff',
            fontSize: 18,
            textAlign: 'center',
          },
        },
        pieStyle: ({ sex }) => {
          if (sex === '男') {
            return {
              fill: '#ebc689',
            };
          }
          return {
            fill: '#4a5059',
          };
        },
        tooltip: false,
        interactions: [{ type: 'element-single-selected' }],
        });
      plot.render();
    }
    onMounted(async () => {
      await loadData();
      initChart();
    });

    onUnmounted(() => {
      if (plot != null) {
        plot.destroy();
      }
    });

    return {
      root,
    };
  },
};
</script>
<style scoped>
</style>
